<template>
  <div class="graphWrapper">
    <div class="title">
      <span class="title-text">统计分析</span>
      <span class="choose-graph">
        统计范围涉及
        <el-select v-model="graphId" placeholder="请选择知识图谱">
          <el-option
            v-for="item in graphOptions"
            :key="item.projectId"
            :label="item.projectName"
            :value="item.projectId"
          >
          </el-option> </el-select
      ></span>
    </div>
    <div class="content">
      <div class="num">
        <div class="card resource">
          <span class="item">数据资源</span>
          <div class="count">
            <div class="has-img" style="width: 33%">
              <img src="@/assets/img/total.png" alt="">
              <div class="decs">
                <span class="big-text" >
                  {{formatNum(dataResource.dataAccessTotal)}}
                </span>
                <!-- style="color: #3a8ee6" -->
                <span class="small-text" >
                  数据接入总数
                </span
                >
                <!-- style="color: #3a8ee6" -->
              </div>
            </div>
            <div class="line-contain">
              <span class="line"></span>
            </div>
            <div class="decs">
              <span class="big-text">
                {{formatNum(dataResource.structuredDataAccess)}}
              </span>
              <span class="small-text">结构化数据接入</span>
            </div>
            <div class="line-contain">
              <span class="line"></span>
            </div>
            <div class="decs">
              <span class="big-text">
                {{formatNum(dataResource.unstructuredDataAccess)}}
              </span>
              <span class="small-text">非结构化数据接入</span>
            </div>
            <div class="line-contain">
              <span class="line"></span>
            </div>
            <div class="decs">
              <span class="big-text">
                {{formatNum(dataResource.locationInformationAccess)}}
              </span>
              <span class="small-text">位置信息接入</span>
            </div>
          </div>
        </div>
        <div class="card graph">
          <span class="item">知识图谱</span>
          <div class="count">
            <div class="has-img">
              <img src="@/assets/img/entityTotal.png" alt="">
              <div class="decs">
                <span class="big-text">
                  {{formatNum(knowledgeGraph.entityNum)}}
                </span>
                <span class="small-text">实体总数</span>
              </div>
            </div>
            <div class="line-contain">
              <span class="line"></span>
            </div>
            <div class="has-img">
              <img src="@/assets/img/relation-total.png" alt="">
              <div class="decs">
                <span class="big-text">
                  {{formatNum(knowledgeGraph.relationNum)}}
                </span>
                <span class="small-text">关系总数</span>
              </div>
            </div>
          </div>
        </div>
        <div class="card ontology">
          <span class="item">本体建模</span>
          <div class="count">
            <div class="has-img">
              <img src="@/assets/img/rela-class-total.png" alt="">
              <div class="decs">
                <span class="big-text">
                  {{formatNum(ontologyModeling.ideaNum)}}
                </span>
                <span class="small-text">概念总数</span>
              </div>
            </div>
            <div class="line-contain">
              <span class="line"></span>
            </div>
            <div class="has-img">
              <img src="@/assets/img/nameTotal.png" alt="">
              <div class="decs">
                <span class="big-text">
                  {{formatNum(ontologyModeling.relationNum)}}
                </span>
                <span class="small-text">关系类别数量</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="chart-bar">
        <!-- <ChartComp :id="'ordinaryBar'"/> -->
        <div v-if="barChart.xData.length === 0" class="no-peoperty">
          <el-empty descriptions="暂无数据"></el-empty>
        </div>
        <ChartComp v-else :id="'ordinaryBar'" :message="ordinaryBar" />
      </div>
    </div>
  </div>
</template>
<script>
import ChartComp from "./components/charts.vue";
export default {
  components: { ChartComp },
  data() {
    return {
      chartsList: [],
      ordinaryBar: {},
      graphId: "",
      graphOptions: [],
      barChart: {
        xData: [],
        yData: [],
      },
      dataResource: {
        dataAccessTotal: 0,
        structuredDataAccess: 0,
        unstructuredDataAccess: 0,
        locationInformationAccess: 0,
      },
      knowledgeGraph: {
        entityNum: 0,
        relationNum: 0,
      },
      ontologyModeling: {
        ideaNum: 0,
        relationNum: 0,
      },
    };
  },
  mounted() {
    this.getList();
    this.initMessageBar();
  },
  watch: {
    graphId() {
      this.getStatistics();
    },
    deep: true,
  },
  methods: {
    async getList() {
      let res = await this.$axios.get(this.$api.knowledgeMap.getAllMap, {
        params: { pageSize: 100 },
      });
      const data = res.data.data;
      if (Array.isArray(data)) {
        this.graphOptions = data;
        if (!this.graphId) {
          this.graphId = this.graphOptions[0].projectId;
        }
        this.getStatistics();
      }
    },
    async getStatistics() {
      this.$axios
        .get(this.$api.graphStatistics.barChart, {
          params: { graphId: this.graphId },
        })
        .then((res) => {
          let xData = res.data.data.map((item) => {
            return item.ontologyName;
          });
          let yData = res.data.data.map((item) => {
            return item.entityNum;
          });
          this.barChart = {
            xData: xData,
            yData: yData,
          };
          // this.barChart = {
          //   xData: ['x1','x2','x3','x4','x1','x2','x3','x4','x1','x2','x3','x4','x1','x2','x3','x4','x1','x2','x3','x4'],
          //   yData: [1,2,3,4,5,7,4,2,6,3,5,5,3,5,3,5,3,4,4,1],
          // };
          this.initMessageBar();
        });
      this.$axios
        .get(this.$api.graphStatistics.dataResource, {
          params: { graphId: this.graphId },
        })
        .then((res) => {
          this.dataResource = res.data.data;
        });
      this.$axios
        .get(this.$api.graphStatistics.knowledgeGraph, {
          params: { graphId: this.graphId },
        })
        .then((res) => {
          this.knowledgeGraph = res.data.data;
        });
      this.$axios
        .get(this.$api.graphStatistics.ontologyModeling, {
          params: { graphId: this.graphId },
        })
        .then((res) => {
          this.ontologyModeling = res.data.data;
        });
    },
    initMessageBar() {
      // console.log(this.barChart,'this.barChart');
      // getTypeStatisticsInfo().then((res) => {
      //   console.log(res, "res");
      //   let videoTypeList = res.data.videoTypeList;
      //   let releaseNumList = res.data.releaseNumList;
      //   let clickNumList = res.data.clickNumList;

      this.ordinaryBar = {
        title: {
          show: true,
          text: '实体统计',
          textStyle: {
            fontSize: 18
          }
        },
        grid: {
          left: "5",
          right: "5",
          // top: "15%",
          bottom: "0",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
        },
        legend: {
          textStyle: {
            color: "#000",
          },
          icon: "rect",
          itemHeight: "3",
        },
        xAxis: {
          type: "category",
          axisLabel: {
            rotate: 45,
            show: true,
            interval: 0, // 设置为0，确保所有刻度都显示
          },
          data: this.barChart.xData,
        },
        yAxis: {
          type: "value",
          minInterval: 1,
          splitLine: {
            lineStyle: {
              color: "#E6E6E6",
              type: "dashed", //虚线
            },
            show: true, //隐藏
          },
        },
        dataZoom: [
          {
            show: true,
            start: 20,
            end: 100,
          },
          {
            type: "inside",
            start: 20,
            end: 100,
          },
        ],
        series: [
          {
            data: this.barChart.yData,
            name: "实体",
            type: "bar",
            symbol: "rect",
            symbolMargin: "2", //图形的两边间隔
            symbolSize: [40, 4], //图形大小
            symbolRepeat: "true", //是否重复
            barMaxWidth: 30,
            itemStyle: {
              color: "#65AAFD",
            },
          },
        ],
      };
      // });
    },
    // 格式化数值
    formatNum(num){
      if(typeof num !== "number"){
        return num;
      }
      if(num > 10000){
        return String(num/10000).split('.')[0] + ' W';
      }
      return num;
    }
  },
};
</script>
<style lang="scss" scoped>
.graphWrapper {
  width: 100%;
  height: calc(100% - 24px);
  min-width: 1319px;
  min-height: 802px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 24px;

  .title {
    height: 40px;
    .title-text {
      border-left: 5px solid #4b71eb;
      padding-left: 10px;
      font-size: 18px;
      line-height: 40px;
    }
    .choose-graph {
      float: right;
      margin-right: 20px;
    }
  }

  .content {
    height: calc(100% - 48px);
    box-sizing: border-box;
    margin-top: 10px;
    // background-color: #000;
    .num {
      width: 100%;
      height: 20%;
      display: flex;
      justify-content: space-between;
      // background-color: #000;
      // margin-bottom: 20px;
      .card {
        margin-right: 24px;
        padding: 0 0 14px 0;
        display: flex;
        flex-direction: column;
        border-radius: 5px;
        .item {
          font-size: 18px;
          padding: 14px 0 10px 20px;
        }

        .count {
          flex: 1;
          // background-color: rosybrown;
          display: flex;
          .line-contain {
            position: relative;
            .line {
              position: absolute;
              top: 50%;
              transform: translate(0, -50%);
              display: inline-block;
              height: 30px;
              border-right: 1px solid #ccc;
            }
          }
          .decs {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .big-text {
              font-size: 28px;
              font-weight: 700;
            }
            .small-text {
              font-size: 14px;
              text-align: center;
            }

            .middle-text {
              font-size: 18px;
              font-weight: 700;
              line-height: 36px;
            }
          }
          .has-img{
            display: flex;
            align-items: center;
            flex: 1.5;
            img{
              width: 56px;
              height: 56px;
              margin-left: 24px;
            }
          }
        }
      }

      .resource {
        flex: 3;
        border: 2px solid #E2E9FF;
        .item{
          background: linear-gradient( 180deg, #E2E9FF 0%, #FFFFFF 100%);
        }
      }

      .graph {
        flex: 2;
        border: 2px solid #E6F5E9;
        .item{
          background: linear-gradient( 180deg, #E6F5E9 0%, #FFFFFF 100%);
        }
        .decs {
          // color: #f2a200;
        }
      }

      .ontology {
        flex: 2;
        border: 2px solid #F9EFD9;
        .item{
          background: linear-gradient( 180deg, #F9EFD9 0%, #FFFFFF 100%);
        }
        .decs {
          // color: #e55c17;
        }
      }
    }

    .chart-bar {
      margin-top: 20px;
      height: 80%;
      position: relative;
      .no-peoperty {
        margin: 0 auto;
      }
    }
  }
}
</style>
